<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>个人设置</el-breadcrumb-item>
  </el-breadcrumb>
</div>
<el-row :gutter="120">
  <el-col :span="12">
<el-form ref="form" :model="userinfo" label-width="80px">
  <el-form-item label="编码:">
   <p>{{userinfo.id}}</p>
  </el-form-item>
   <el-form-item label="手机:">
    <p>{{userinfo.mobile}}</p>
  </el-form-item>
   <el-form-item label="媒体名称:">
    <el-input v-model="userinfo.name"></el-input>
  </el-form-item>
  <el-form-item label="媒体介绍:">
    <el-input type="textarea" v-model="userinfo.intro"></el-input>
  </el-form-item>
   <el-form-item label="邮箱:">
    <el-input v-model="userinfo.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" 
    @click="updateuser"
     :loading="updateProfileLoading">保存设置</el-button>
  </el-form-item>
</el-form>
</el-col>
<el-col :span="12">
  <label for="file">
  <el-avatar shape="square"
   :size="200"
   fit="cover"
   :src="userinfo.photo"></el-avatar>
  <p class="updateimg">点击修改图像</p>
  <input 
  id="file"
  type="file"
  ref="file"
  hidden
  @change ='updateimg'
  >
  </label>
</el-col>
</el-row>
</el-card>
<!-- 提示框显示隐藏 -->
<el-dialog
  title="上传头像展示"
  :visible.sync="dialogVisible"
  width="20%"
  @opened="previewswaper" 
>
  <div class="preview-swaper">
    <img 
      class="preview-item"
      :src="perviewimg"
      ref="previewitem"
    >
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button 
    type="primary" 
    @click="submitimg"
    :load="loadupdateimg"
  >确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
  export default {
    name:'settings',
    data () {
      return {
        userinfo:{
          email:'',
          id:0,
          intro:'',
          mobile:'',
          name:'',
          photo:'',
        
        },
        dialogVisible:false,
        perviewimg:'',
        updateProfileLoading:false,
        previewimginfo:null,
        loadupdateimg:false
      }
    },
    created () {
      this.getuserinfo()
    },
    methods: {
      async getuserinfo(){
        let res =await  this.$http.get('/mp/v1_0/user/profile')
        this.userinfo  = res.data.data
        console.log(this.userinfo)
      },
      updateimg(){
      const file = this.$refs.file
      const imgurl= window.URL.createObjectURL(file.files[0])
      this.perviewimg= imgurl
      
      this.dialogVisible =true

      this.$refs.file.value = ''
    },
    //修改用户资料
   async updateuser(){
     this.updateProfileLoading=true
      let res = await this.$http({
        method:'patch',
        url:'/mp/v1_0/user/profile',
        parasm:{
          name:this.userinfo.name,
          intro:this.userinfo.intro,
          email:this.userinfo.email
        }
      })
      console.log(res)
      if(res.data.message =='OK'){
        this.updateProfileLoading=false
        this.$bus.$emit('updateuserinfo',this.userinfo)
         this.$message({
          message: '修改成功',
          type: 'success'
        });
      
      }
    },
    //提交修改的图片
    async submitimg(){
      this.previewimginfo.getCroppedCanvas().toBlob(async (file) =>{
          const fd = new FormData()
            fd.append('photo',file)
          let res =await this.$http({
            url:'/mp/v1_0/user/photo',
            method:'patch',
            params:{
              file:fd
            }
       })
       this.dialogVisible=false
       // 把剪裁结果的文件对象为blob数据本地
       this.userinfo.photo = window.URL.createObjectURL(file)
       this.loadupdateimg=false
  
       this.$message({
            type: 'success',
            message: '更新头像成功'
    })
    //更新头部图像 
    this.$bus.$emit('updateuserinfo',this.userinfo)
       console.log(res)
  }) 
    },
    //加载完成弹窗动画时回调
    previewswaper(){
      this.loadupdateimg =true
      const imgrefs  = this.$refs.previewitem
      if(this.previewimginfo){
        this.previewimginfo.replace(this.perviewimg)
        return
      }     
      this.previewimginfo = new Cropper(imgrefs, {
      aspectRatio: 16 / 9,
      viewMode: 1,
      dragMode: 'none',
      aspectRatio: 1,
      cropBoxResizable: false
    })
  }
    }

  }
</script>
<style lang="less" scoped>
  .el-breadcrumb{
    font-size: 18px;
  }
  .updateimg{
  margin-left: 40px;
  font-size: 20px;
  font-weight: bold;
  }
  .preview-swaper{
    .preview-item{
       display: block;
       max-width: 100%;
       height: 200px;
    }
  }
</style>